<template>
  <q-dialog class="look-img-dialog" v-model="show">
    <div class="kuang relative-position scrollbar">
      <PdfCanvas :link-url="link" @rendered="rendered"/>
      <q-btn flat round color="white" class="iconfont icontubiao-67 close-btn fixed" @click="hideDialog" />
      <q-inner-loading :showing="loading" class="pdf-content">
        <q-spinner-gears size="50px" color="primary" />
      </q-inner-loading>
    </div>
  </q-dialog>
</template>

<script>
import { getBasisUrl } from '../../boot/template/template-upload'
import PdfCanvas from './components/pdf-canvas'

export default {
  name: 'look-img',
  components: {
    PdfCanvas
  },
  data () {
    return {
      show: false,
      link: '', // 可用的连接
      loading: false
    }
  },
  methods: {
    // 显示弹框
    showDialog (link) {
      this.initInfo(link)
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    initInfo (link) {
      this.loading = true
      getBasisUrl().then(res => {
        if (link.indexOf(res.data) === -1) {
          this.link = res.data + link
        } else {
          this.link = link
        }
        this.show = true
      })
    },
    rendered () {
      this.loading = false
    }
  }
}
</script>

<style scoped lang="stylus">
.kuang{
  max-width 100%
  max-height 100%
  width 100%
  height 100%
  .pdf-content{
    width 100%
    margin-bottom 15px
    &:last-child{
      margin-bottom 0
    }
  }
}
.close-btn{
  color #ffffff
  z-index 99999999
  font-size 24px
  top 0
  right 0
}
</style>
